import React, { useState, useEffect } from 'react';
import '../MonitoringPanel.css';

interface ElectricityStatisticsPanelProps {
  // 可以添加从父组件传入的属性
}

// 生成模拟的用电数据
const generateElectricityData = () => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月'];
  // 使用固定的模拟数据以确保图表效果稳定
  const electricityData = [25, 35, 40, 45, 55, 65];
  
  return {
    months,
    electricityData
  };
};

const ElectricityStatisticsPanel: React.FC<ElectricityStatisticsPanelProps> = () => {
  const [data, setData] = useState(generateElectricityData());
  const [isAnimating, setIsAnimating] = useState(false);

  // 模拟数据更新
  useEffect(() => {
    const interval = setInterval(() => {
      setIsAnimating(true);
      setTimeout(() => {
        setData(generateElectricityData());
        setIsAnimating(false);
      }, 300);
    }, 25000); // 每25秒更新一次数据

    return () => clearInterval(interval);
  }, []);

  // 计算条形图的高度
  const calculateBarHeight = (value: number) => {
    // 使用固定的最大值100来确保条形图高度比例一致
    const maxValue = 100;
    return (value / maxValue) * 100; // 占图表高度的100%
  };

  return (
    <div className={`monitoring-panel ${isAnimating ? 'data-update' : ''}`}>
      <div className="panel-header">
        <h3 className="panel-title">
          机房用电统计
          <span style={{ fontSize: '12px', fontWeight: 'normal', marginLeft: '8px', color: '#a0aec0' }}>
           
          </span>
        </h3>
        <div className="panel-decoration">
          <div className="decoration-line"></div>
          <div className="decoration-line"></div>
          <div className="decoration-line"></div>
          <div className="decoration-line"></div>
        </div>
      </div>
      
      <div className="chart-container">
        <svg width="100%" height="100%" viewBox="0 0 300 180">
          {/* 坐标轴 */}
          <line x1="30" y1="100" x2="280" y2="100" stroke="#336699" strokeWidth="1" />
          <line x1="30" y1="0" x2="30" y2="100" stroke="#336699" strokeWidth="1" />
          
          {/* 水平网格线 */}
          {[0, 50, 100].map((value) => (
            <line 
              key={`h-${value}`}
              x1="30" y1={100 - value} x2="280" y2={100 - value} 
              stroke="#336699" strokeWidth="1" strokeDasharray="2,2" opacity="0.3"
            />
          ))}
          
          {/* 数值刻度 */}
          <text x="25" y="0" textAnchor="end" fill="#a0aec0" fontSize="10">100</text>
          <text x="25" y="50" textAnchor="end" fill="#a0aec0" fontSize="10">50</text>
          <text x="25" y="100" textAnchor="end" fill="#a0aec0" fontSize="10">0</text>
          
          {/* 条形图 */}
          {data.electricityData.map((value, index) => {
            const barHeight = calculateBarHeight(value);
            const x = 45 + (index * 40);
            const y = 100 - barHeight;
            
            return (
              <g key={`bar-${index}`}>
                {/* 前景条 */}
                <rect 
                  x={x}
                  y={isAnimating ? 100 : y}
                  width="30"
                  height={isAnimating ? 0 : barHeight}
                  fill="url(#electricityGradient)"
                  rx="2"
                  ry="2"
                  style={isAnimating ? {
                    animation: `barGrow 0.6s ease-out forwards`,
                    animationDelay: `${index * 0.05}s`
                  } : {}}
                />
                
                {/* 高亮效果 */}
                <rect 
                  x={x}
                  y={isAnimating ? 100 : y}
                  width="30"
                  height={isAnimating ? 0 : barHeight}
                  fill="#74b6ff"
                  opacity="0.2"
                  rx="2"
                  ry="2"
                  style={isAnimating ? {
                    animation: `barGrow 0.6s ease-out forwards`,
                    animationDelay: `${index * 0.05}s`
                  } : {}}
                />
              </g>
            );
          })}
          
          {/* 月份标签 */}
          {data.months.map((month, index) => (
            <text 
              key={`month-${index}`}
              x={45 + (index * 40) + 15}
              y="120"
              textAnchor="middle"
              fill="#a0aec0"
              fontSize="10"
            >
              {month}
            </text>
          ))}
          
          {/* X轴数值标签 */}
          <text x="155" y="140" textAnchor="middle" fill="#a0aec0" fontSize="10">0</text>
          <text x="215" y="140" textAnchor="middle" fill="#a0aec0" fontSize="10">50</text>
          <text x="275" y="140" textAnchor="middle" fill="#a0aec0" fontSize="10">100</text>
          
          {/* 渐变定义 */}
          <defs>
            <linearGradient id="electricityGradient" x1="0%" y1="100%" x2="0%" y2="0%">
              <stop offset="0%" stopColor="#0066cc" stopOpacity="0.8" />
              <stop offset="100%" stopColor="#00f0ff" stopOpacity="0.8" />
            </linearGradient>
          </defs>
        </svg>
      </div>
    </div>
  );
};

export default ElectricityStatisticsPanel;